<template>
  <div class="toplist">
    <h3>{{ title }}</h3>
    <div class="toplist-info" v-for="(item,index) in data" :key="index"
      :class="{ on:index%2 == 0 }">
      <div class="toplist-rank" v-if="index <= 9">
        <span :class="{ num:index <= 2 }">{{ comNum(index + 1) }}</span>
        <img v-lazy="item.coverUrl" alt="">
      </div>
      <div class="toplist-msg" v-if="index <= 9">
        <span>{{ item.name }}</span>
        <span>{{ item.radio.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      title: String,
      data: Array
    },

    data() {
      return {
        
      }
    },

    methods:{
      comNum(num){
        if(num < 10){
          return '0' + num;
        }else{
          return num;
        }
      }
    }
  }
</script>

<style scoped>
.toplist{
  padding: 10px;
}
.toplist-info{
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  padding-left:10px;
}

.toplist-rank{
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding-right: 10px; */
}

.toplist-rank img{
  width: 50px;
  height: 50px;
  padding-left: 20px;
}

.toplist-msg{
  display: flex;
  flex-direction: column;
  text-overflow: ellipsis;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  width: 230px;
  font-size: 12px;
}

.on{
  background: rgb(239, 239, 239);;
}

.num{
  color: #fc6464;
}
</style>